<template>
  <epgis-nav-container title="偏好设置">
    <template #container>
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div style = " margin: 0px 10px 10px 10px; background: white;  padding: 10px; border-radius: 10px;" class="layoutVerticle">
          <span style="">对方所在城市</span>
          <div class="history_wrap" v-if="selectCityList.length>0">
            <div class="history_item">
              <van-tag   
                v-for="(item, index) in selectCityList"
                @click="selectPrefreceCity(item, index)"
                :key="item['value']"
                type="primary"
                round
                size="medium">
                <img src="@/assets/icon/home/add.png" v-if="item['value'] == 'add'" style="height: 16px; margin-right: 3px;margin-left: 3px"/>
                {{item['label']}}
              </van-tag>
            </div>
          </div>
          <span style="color: #9197a3;font-size: 11px; margin-top: 14px;">嘉宾不足时，允许推荐周边城市</span>
          <van-divider />
          <div style= "" class="layoutHorizontal layoutVerticleCenter">
            <span style="flex: 1;">对方年龄</span>
            <span style="font-size: 16px;">{{ageLabel}}</span>
          </div>
          <van-slider v-model="ageValue" range @change="onChangeAge" :min="20" :max="70"  style="margin-top: 20px;"/>
          <span style="color: #9197a3;font-size: 11px; margin-top: 26px;">优先为你推荐符合该年龄的嘉宾</span>
          <van-divider style="margin-top: 30px;"/>

          <div style= "" class="layoutHorizontal layoutVerticleCenter">
            <span style="flex: 1;">对方身高</span>
            <span style="font-size: 16px;">{{heightLabel}}</span>
          </div>
          <van-slider v-model="heightValue" range @change="onChangeHeight" :min="140" :max="220"  style="margin-top: 30px;"/>
          <van-divider style="margin-top: 28px;"/>

          <span style="">对方家乡</span>
          <div class="history_wrap" v-if="homeTownList.length>0">
            <div class="history_item">
              <van-tag   
                v-for="(item, index) in homeTownList"
                @click="selectPrefreceCity(item, index)"
                :key="item['value']"
                type="primary"
                round
                size="medium">
                {{item['label']}}
              </van-tag>
            </div>
          </div>
          <van-divider style="margin-top: 18px;"/>

           
          <span style="">对方学历</span>
          <div class="history_wrap" v-if="educationLevelList.length>0">
            <div class="history_item">
              <van-tag   
                v-for="(item, index) in educationLevelList"
                @click="selectPrefreceCity(item, index)"
                :key="item['value']"
                type="primary"
                round
                size="medium">
                {{item['label']}}
              </van-tag>
            </div>
          </div>
          <van-button @click="submitMsg" type="primary" style="margin-left: 12%; margin-right: 12%;margin-top: 30px;border-radius: 8px;height: 40px;" >
            保 存
          </van-button>
        </div>
      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
import   { areaList } from "@/assets/arealist/Area.js"

export default {
  components: {},
  data() {
    return {
      recommentSex:'',
      SEX_BOY:'1',
      SEX_GIRL:'2',
      areaList:areaList,
      selectCityList:[
        {"label":"厦门", "value":"350200"},
        {"label":"", "value":"add"},
      ],
      isCityPopup:false,
      cityValue:'',
      ageLabel:'23-50',
      ageValue: [23, 50],
      heightLabel:'173-200',
      heightValue: [173, 200],
      homeTownList:[
        {"label":"优先同省老乡", "value":"01"},
        {"label":"优先当地人", "value":"02"},
      ],

      educationLevelList:[
        {"label":"初中", "value":"01"},
        {"label":"高中", "value":"01"},
        {"label":"中专", "value":"02"},
        {"label":"大专", "value":"02"},
        {"label":"本科", "value":"02"},
        {"label":"硕博", "value":"02"},
      ],



    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {

  },
  methods: {
    selectPrefreceCity(item, index){
      if(item && item['value'] != 'add'){
        this.cityValue = item['value'];
      }else if(item && item['value'] == 'add'){
        this.cityValue = "";
      }
      console.log("城市值：" + item['value'] );
      console.log("城市值：" + this.cityValue );
      this.isCityPopup = true;

    },

    confirmPopup(data) {
      console.log("城市：" + JSON.stringify(data));
      this.isCityPopup = false;
      this.cityName = data[2]['name'];
      this.cityCode = data[2]['code'];
    },

    onChangeAge(value){
      console.log("改变值：", value);
      this.ageLabel = value[0] + "-" + value[1];
    },

    onChangeHeight(value){
      console.log("改变值：", value);
      this.heightLabel = value[0] + "-" + value[1];
    },

    submitMsg(){

    },


    






    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  .layoutVerticleCenter{
    align-items: center;
  }

  .history_wrap {
    margin-top: 4px;
    background: #ffffff;
    overflow: scroll;
    .history_item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      /deep/.van-tag {
        margin-right: 10px;
        margin-top: 10px;
        border: 1px solid #8a8a8a;
        color: #8a8a8a;
        padding: 5px 25px;
      }
      /deep/.van-tag--primary {
        background-color: white;
      }
    }
  }

  // .history_wrap::after {
  //   position: absolute;
  //   box-sizing: border-box;
  //   content: ' ';
  //   pointer-events: none;
  //   right: 16px;
  //   bottom: 0;
  //   left: 16px;
  //   border-bottom: 1px solid #ebedf0;
  //   -webkit-transform: scaleY(.5);
  //   transform: scaleY(.5);
  // }






</style>